Фоновое подчеркивание для выделения текста, CSS свойство text-decoration-skip

После рассмотрения мини-тренда с летающими логотипами хотим познакомить вас с еще одной актуальной темой, о которой недавно написали в Medium. Речь пойдет про весьма оригинальный способ выделения текста с помощью фоновой «подложки» в виде цветной жирной линии. Ниже в статье найдете парочку примеров данной техники.

Само по себе решение вызывает достаточно неоднозначную реакцию у сообщества. Еще со времен зарождения классического «однопиксельного» подчеркивания некоторых дизайнеров смущает пересечение нижних полосок с буквами. В последствии были придуманы разные хаки и даже специальное CSS свойство (text-decoration-skip). С другой стороны такой прием позволяет выделить нужный участок текста, ссылку либо конкретные слова в предложении, сделав типографику страницы чуть более интересной.

Как правило, для реализации используются яркие цвета, возможно, контрастные. Чаще всего они светлее текста, располагаются за ним. Степень пересечения элементов встречается разная — где-то они лишь соприкасаются, в других примерах «фон» занимает более трети текста.

Сложно сказать сколько проживет данный тренд веб-дизайна, главное при его реализации не забывать о юзабилити — тексты должны хорошо читаться, а обилие полосок не отвлекать пользователя от основного контента. С яркими акцентами нужно быть внимательным.

Свойство text-decoration-skip

Напоследок пару слов хотелось бы сказать про, упомянутое выше, CSS свойство, которое определяет как именно фоновая полоска будет вести себя с контентом на странице. Если интересно, в блоге есть детальная заметка про подчеркивание ссылок и текста.

У text-decoration-skip есть несколько значений:

• objects (по умолчанию) — пропускаются инлайновые элементы (в т.ч. картинки).
• none — создаются пересечения со всеми объектами.
• spaces — пропускаются пробелы, символы разделения текста и свойства letter-spacing / word-spacing.
• ink (как в примере выше) — линии не пересекает символы и буквы.
• edges — подчеркивание начинается строго от начала контента и заканчивается на последней букве.
• box-decoration — не учитываются отступы margin, border и padding.

Чтобы проще это понять вот картинка (из этой статьи).

Если вы видели на каких-то сайтах примеры нового мини-тренда с перекрывающими текст линиями, делитесь линками в комментариях. Будет интересно глянуть.